<template>
	<view id="server">
		<!-- <div class="serverCont">
			请大家按照要求进行预约哦～！
		</div> -->
		<div class="tabar">
			<tab :typeList='typeList' :moType='moType' @tabChangeType='tabChangeType'></tab>
		</div>
		<div v-if="tabIndex !== 0">
			<div class="tabarweek">
				<weektab :monthList='classDetail.day' :show="showWeek" :FtabCurrent='FtabCurrent' @tabChange='tabChange'
					@openDown='openDown' :showWeek='showWeek'></weektab>
			</div>
			<div class="serverTime" v-if="serachTime" @click='openDown'>
				搜索时间：<span>{{serachTime}}</span>
			</div>
		</div>
		<div class="" v-if="tabIndex == 0">
			<div class="serverCont_items" @click='addServer(1)'>
				<image src="https://wx.sjcmhz.com/static/image/fangwu_bar.png" mode=""></image>
			</div>
			<div class="serverCont_items" @click='addServer(2)'>
				<image src="https://wx.sjcmhz.com/static/image/jiadian_bar.png" mode=""></image>
			</div>
			<div class="serverCont_items" @click='addServer(3)'>
				<image src="https://wx.sjcmhz.com/static/image/jiaju_bar.png" mode=""></image>
			</div>

		</div>

		<!-- 这里是tab对应的内容 -->
		<div class="serverList" v-else>
			<list :list="classPageList"></list>
		</div>

		<!-- 日历 -->
		<u-calendar color="#9013FE" :show="show" :mode="mode" @confirm="confirm" @close='show=false'></u-calendar>

	</view>
</template>

<script>
	import tab from './components/tab.vue'
	import list from './components/list.vue'
	import weektab from './components/weekTab.vue'
	export default {
		components: {
			tab,
			list,
			weektab
		},
		data() {

			return {
				list: {
					img: 'https://wx.sjcmhz.com/static/serve/dg.png',
					name: '灯光/美颜',
					time: [{
						num: 1,
						time: '09:00~10:00'
					}, {
						num: 1,
						time: '10:00~11:00 '
					}, {
						num: 1,
						time: '11:00~12:00 '
					}, {
						num: 1,
						time: '12:30 ~14:00'
					}, {
						num: 1,
						time: '14:00～15:00 '
					}, {
						num: 1,
						time: '15:00～17:20'
					}, {
						num: 1,
						time: '18:00～21:00 '
					}, {
						num: 1,
						time: '21:00～22:00'
					}, ]
				},
				/*
				声卡效果精修 灯光/美颜
				 */
				list1: {
					img: 'https://wx.sjcmhz.com/static/serve/sk.png',
					name: '声卡效果精修',
					time: [{
						num: 1,
						time: '09:00～09:30'
					}, {
						num: 1,
						time: '11:00～11:30 '
					}, {
						num: 1,
						time: '13:00～13:30 '
					}, ]
				},
				/*
				理发 声卡效果精修 灯光/美颜
	

				 */
				list2: {
					img: 'https://wx.sjcmhz.com/static/serve/lf.png',
					name: '理发',
					time: [{
						num: 1,
						time: '06:00～8:30'
					}, {
						num: 1,
						time: '09:00～11:30'
					}, {
						num: 1,
						time: '12:00～14:30 '
					}, {
						num: 1,
						time: '15:00～17:30  '
					}, {
						num: 1,
						time: '18:00～20:30'
					}, {
						num: 1,
						time: ' 21:00～23:30'
					}, ]
				},
				/*
				

				 */
				list3: {
					img: 'https://wx.sjcmhz.com/static/serve/lf.png',
					img1: 'https://wx.sjcmhz.com/static/serve/wx.png',
					name: '精细保洁',
					name1: '设备报修',

					// 08:30～09:30          
					// 08:30～12:00  14:00～18:00   
					time: [{
							num: 1,
							time: '08:30～09:30 '
						}, {
							num: 1,
							time: '09:30~10:30'
						}, {
							num: 1,
							time: '10:30~11:30 '
						},

						{
							num: 1,
							time: '12:00~13:30  '
						},

						{
							num: 1,
							time: '13:30~15:00'
						}, {
							num: 1,
							time: '15:00~16:30'
						}, {
							num: 1,
							time: '16:30~18:00 '
						},
						{
							num: 1,
							time: '18:30~20:00'
						},
						{
							num: 2,
							time: '08:30～12:00 '
						},
						{
							num: 2,
							time: '14:00～18:00'
						},
						{
							num: 2,
							time: '18:30～20:00'
						}
					]
				},
				/*
				借衣服
				
				 */
				// 10:00～11:30 14:30～16:00 17:30～19:00 19:00～20:30
				list4: {
					img: 'https://wx.sjcmhz.com/static/serve/lf.png',
					name: '借衣服',
					time: [{
						num: 1,
						time: '10:00～11:30 '
					}, {
						num: 1,
						time: '14:30～16:00 '
					}, {
						num: 1,
						time: '17:30～19:00  '
					}, {
						num: 1,
						time: '19:00～20:30 '
					}]
				},
				listOne: [],
				listShow: true,
				moType: 0,
				classPageList: [],
				typeList: [{
					"type_id": "4",
					"title": "报修"
				}],
				type: "报修",
				tabIndex: 0,
				time: '',
				FtabCurrent: 0,
				showWeek: false,
				show: false,
				mode: 'single',
				classDetail: [],
				serachTime:'',
				onTime:''
			};
		},
		onLoad(opt) {
		
		},
		onHide() {
			console.log('页面被关闭了');
			uni.removeStorageSync('smoId')
			uni.setStorageSync('smoId', 0)
		},
		onShow() {
			this.$utils.isLogin()
			this.listOne = this.list
			this.moType = uni.getStorageSync('smoId') || 0
			// this.tabChangeType(this.moType)
			this.getClasssIndex()
			this.getWorkTab()
			this.getClassList()
			console.error('onShowonShowonShowonShowonShow', this.moType)
		},
		onLaunch() {
			console.log('页面被关闭了');
			uni.removeStorageSync('smoId')
			uni.setStorageSync('smoId', 0)
		},
		methods: {
			openDown() {
				this.show = !this.show
				console.log('show', this.show)
			},
			async getClasssIndex(type) {
				const {
					data
				} = await this.$request(this.$Api.classsIndex, {
					anchor_id: this.anchor_id
				}, "POST")
				uni.stopPullDownRefresh()
				if (data.code !== 0) return
				this.classDetail = data.data
				if (data.data.day && type != 1) {
					this.onTime = this.time = data.data.day[0].times
				}
				// if (data.data.type && type != 1) {
				// 	const index = this.moType || 0
				// 	this.type = data.data.type[index].title
				// }
				this.getClassList()
				console.log('1112', data.data.day.lenght)
			},
			confirm(e) {
				this.time = this.serachTime = e[0]
				this.FtabCurrent = -1
				this.show = !this.show
				console.log(this.time);
				this.getClassList()
			},
			async getWorkTab(type, time) {
				this.typeList = [{
					"type_id": "4",
					"title": "报修"
				}]
				const {
					data
				} = await this.$request(this.$Api.workType, {}, "POST")
				if (data.code !== 0) return
				this.typeList = this.typeList.concat(data.data.type)
				this.tabChangeType({type:this.typeList[this.moType].title,index:this.moType })
			},
			// classsList
			async getClassList(type, time) {
				const params = {
					type: this.type,
					time: this.time
				}
				const {
					data
				} = await this.$request(this.$Api.classsList, params, "POST")
				uni.stopPullDownRefresh()
				if (data.code !== 0) return
				this.classPageList = data.data.list
			},
			addServer(type) {
				// this.addServer = type
				uni.navigateTo({
					url: '/pages/server/upDataServe?type=' + type
				})
			},
			tabChangeType(e) {
				this.type = e.type
				this.serachTime = ''
				this.time = this.onTime
				this.FtabCurrent = 0
				this.tabIndex = e.index || 0
				this.getClassList()
				
				console.log('typestypestypes', e.type)
			},
			tabChange(times) {
				this.time = times
				this.serachTime = ''
				console.log('tabChangetabChange', times)
				this.getClassList()

			},
		},
	};
</script>

<style lang="scss">
	.serverTime {
		color: #000;
		margin-top: 20rpx;
		line-height: 66rpx;
		font-weight: bold;
		font-size: 28rpx;
		padding: 0 32rpx;
	
		span {
			color: #666;
			font-weight: 500;
			font-size: 24rpx;
		}
	
	}
	
	.serverCont {
		width: 750rpx;
		height: 82rpx;
		background: #FFFFFF;
		font-size: 32rpx;
		color: #F5A623;
		line-height: 82rpx;
		padding: 0 40rpx;
		box-sizing: border-box;

	}

	.serverCont_items {
		width: 100%;
		height: 228rpx;
		background: #fff;
		padding: 32rpx;
		box-sizing: border-box;
		margin-top: 20rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.tabar {
		background: #fff;
		margin-top: 20rpx;
		padding: 32rpx 0;
	}

	.serverList {
		background: #fff;
		margin-top: 25rpx;
		margin-bottom: 50rpx;
	}
</style>